import React, { useState } from 'react';
import { 
  ChevronDown, 
  ChevronRight, 
  Layers, 
  Target, 
  Workflow, 
  Grid, 
  Calendar, 
  Brain,
  Database,
  Shield,
  TrendingUp,
  Users,
  FileText,
  AlertTriangle,
  CheckCircle,
  Clock,
  Zap
} from 'lucide-react';

export default function ProductDesignOverview() {
  const [activeTab, setActiveTab] = useState('overview');
  const [expandedSection, setExpandedSection] = useState(null);

  const tabs = [
    { id: 'overview', name: '产品概览', icon: Target },
    { id: 'architecture', name: '架构设计', icon: Layers },
    { id: 'workflow', name: '业务流程', icon: Workflow },
    { id: 'features', name: '功能矩阵', icon: Grid },
    { id: 'roadmap', name: '实施路线', icon: Calendar }
  ];

  const renderOverview = () => (
    <div className="space-y-8">
      {/* 产品定位 */}
      <div className="bg-gradient-to-r from-blue-50 to-green-50 rounded-lg p-8">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">产品定位与愿景</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <h3 className="text-lg font-semibold text-blue-600 mb-3">核心定位</h3>
            <p className="text-gray-700 leading-relaxed">
              AI驱动的一站式ESG服务平台，成为企业实现ESG战略转型的<strong>"智慧大脑"和"导航仪"</strong>，
              帮助企业从被动合规走向主动价值创造。
            </p>
          </div>
          <div>
            <h3 className="text-lg font-semibold text-green-600 mb-3">核心价值</h3>
            <ul className="space-y-2 text-gray-700">
              <li>• 整合数据，洞察风险，优化绩效</li>
              <li>• 简化报告，量化价值</li>
              <li>• 提升市场竞争力</li>
              <li>• 吸引可持续投资</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 设计理念 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">核心设计理念</h2>
        <div className="grid md:grid-cols-3 gap-6">
          <div className="text-center">
            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Layers className="w-8 h-8 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-800 mb-2">分层解耦，AI贯穿</h3>
            <p className="text-sm text-gray-600">
              清晰的层级结构，每层都有AI作为核心驱动力，实现自动化和智能化
            </p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Workflow className="w-8 h-8 text-green-600" />
            </div>
            <h3 className="font-semibold text-gray-800 mb-2">数据-洞察-行动闭环</h3>
            <p className="text-sm text-gray-600">
              从准确数据出发，通过AI提炼洞察，转化为可执行的商业行动
            </p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Target className="w-8 h-8 text-purple-600" />
            </div>
            <h3 className="font-semibold text-gray-800 mb-2">统一性与定制化</h3>
            <p className="text-sm text-gray-600">
              统一的ESG数据本体论，针对不同行业和客户需求高度定制
            </p>
          </div>
        </div>
      </div>

      {/* 目标客户 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-4">目标客户群体</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <h3 className="font-semibold text-gray-800 mb-3">主要行业</h3>
            <div className="flex flex-wrap gap-2">
              {['铝行业', '电子元器件', '光伏组件', '化工', '汽车制造', '纺织服装'].map(industry => (
                <span key={industry} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                  {industry}
                </span>
              ))}
            </div>
          </div>
          <div>
            <h3 className="font-semibold text-gray-800 mb-3">企业规模</h3>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-600">大型企业</span>
                <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">核心客户</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">中型企业</span>
                <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">主要客户</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">小型企业</span>
                <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm">潜在客户</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderArchitecture = () => (
    <div className="space-y-8">
      {/* 架构概览 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">三层架构设计</h2>
        <div className="space-y-6">
          
          {/* 第三层 */}
          <div className="border-l-4 border-orange-500 pl-6">
            <div className="flex items-center mb-3">
              <TrendingUp className="w-6 h-6 text-orange-500 mr-3" />
              <h3 className="text-lg font-semibold text-gray-800">第三层：战略赋能与价值交付层</h3>
            </div>
            <p className="text-gray-600 mb-3">将洞察转化为战略行动、自动化报告和商业价值</p>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="bg-orange-50 p-4 rounded-lg">
                <h4 className="font-medium text-orange-800 mb-2">AI驱动的行动规划</h4>
                <p className="text-sm text-orange-700">智能生成ESG改进方案，预测投资回报</p>
              </div>
              <div className="bg-orange-50 p-4 rounded-lg">
                <h4 className="font-medium text-orange-800 mb-2">自动化报告生成</h4>
                <p className="text-sm text-orange-700">多框架ESG报告，评级平台优化</p>
              </div>
              <div className="bg-orange-50 p-4 rounded-lg">
                <h4 className="font-medium text-orange-800 mb-2">商业价值量化</h4>
                <p className="text-sm text-orange-700">ROI分析，绿色溢价机会识别</p>
              </div>
            </div>
          </div>

          {/* 第二层 */}
          <div className="border-l-4 border-green-500 pl-6">
            <div className="flex items-center mb-3">
              <Brain className="w-6 h-6 text-green-500 mr-3" />
              <h3 className="text-lg font-semibold text-gray-800">第二层：智能洞察与风险引擎层</h3>
            </div>
            <p className="text-gray-600 mb-3">将标准化数据转化为深度洞察和风险预警</p>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="bg-green-50 p-4 rounded-lg">
                <h4 className="font-medium text-green-800 mb-2">ESG绩效评估</h4>
                <p className="text-sm text-green-700">碳盘查、PCF计算、水资源足迹</p>
              </div>
              <div className="bg-green-50 p-4 rounded-lg">
                <h4 className="font-medium text-green-800 mb-2">智能合规预警</h4>
                <p className="text-sm text-green-700">CBAM风险预估、法规知识图谱</p>
              </div>
              <div className="bg-green-50 p-4 rounded-lg">
                <h4 className="font-medium text-green-800 mb-2">基准测试分析</h4>
                <p className="text-sm text-green-700">行业对比、标准符合度分析</p>
              </div>
            </div>
          </div>

          {/* 第一层 */}
          <div className="border-l-4 border-blue-500 pl-6">
            <div className="flex items-center mb-3">
              <Database className="w-6 h-6 text-blue-500 mr-3" />
              <h3 className="text-lg font-semibold text-gray-800">第一层：ESG数据基石层</h3>
            </div>
            <p className="text-gray-600 mb-3">构建准确、规范、全面的ESG数据基础</p>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-medium text-blue-800 mb-2">企业内部数据整合</h4>
                <p className="text-sm text-blue-700">ERP/MES系统集成、IoT数据接入、智能文档提取</p>
              </div>
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-medium text-blue-800 mb-2">供应链数据收集</h4>
                <p className="text-sm text-blue-700">供应商门户、第三方平台数据、公开数据爬取</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* AI能力分布 */}
      <div className="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">AI能力在各层的分布</h2>
        <div className="grid md:grid-cols-3 gap-6">
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <Zap className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="font-semibold text-blue-600 mb-2">数据层AI</h3>
            <ul className="text-sm text-gray-600 space-y-1">
              <li>• OCR文本识别</li>
              <li>• NLP语义理解</li>
              <li>• 异常检测</li>
              <li>• 数据清洗</li>
            </ul>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <Brain className="w-6 h-6 text-green-600" />
            </div>
            <h3 className="font-semibold text-green-600 mb-2">洞察层AI</h3>
            <ul className="text-sm text-gray-600 space-y-1">
              <li>• 智能合规校验</li>
              <li>• 风险预测</li>
              <li>• 趋势分析</li>
              <li>• 基准推荐</li>
            </ul>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <TrendingUp className="w-6 h-6 text-orange-600" />
            </div>
            <h3 className="font-semibold text-orange-600 mb-2">价值层AI</h3>
            <ul className="text-sm text-gray-600 space-y-1">
              <li>• 行动规划生成</li>
              <li>• ROI预测</li>
              <li>• 策略优化</li>
              <li>• 内容生成</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );

  const renderWorkflow = () => (
    <div className="space-y-8">
      {/* 用户旅程 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">典型用户旅程</h2>
        <div className="space-y-6">
          
          {/* 新用户接入 */}
          <div className="border border-gray-200 rounded-lg p-4">
            <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
              <Users className="w-5 h-5 mr-2 text-blue-500" />
              新用户接入流程
            </h3>
            <div className="flex flex-wrap gap-2 mb-3">
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">1. 企业基础信息录入</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">2. 数据源识别配置</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">3. 初始数据导入</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">4. AI数据清洗</span>
              <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">5. 基础分析报告</span>
            </div>
            <p className="text-sm text-gray-600">预计耗时：2-4周，大部分为自动化处理</p>
          </div>

          {/* 日常使用 */}
          <div className="border border-gray-200 rounded-lg p-4">
            <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
              <Workflow className="w-5 h-5 mr-2 text-green-500" />
              日常使用workflow
            </h3>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <h4 className="font-medium text-gray-700 mb-2">数据管理</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 定期数据同步（自动化）</li>
                  <li>• 数据质量监控</li>
                  <li>• 供应商数据更新</li>
                  <li>• 异常数据处理</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium text-gray-700 mb-2">分析与报告</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 月度绩效回顾</li>
                  <li>• 风险预警处理</li>
                  <li>• 行动计划调整</li>
                  <li>• 季度/年度报告生成</li>
                </ul>
              </div>
            </div>
          </div>

          {/* 重点场景 */}
          <div className="border border-gray-200 rounded-lg p-4">
            <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
              <Target className="w-5 h-5 mr-2 text-purple-500" />
              重点业务场景
            </h3>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="bg-red-50 p-3 rounded">
                <h4 className="font-medium text-red-800 mb-1">CBAM合规</h4>
                <p className="text-sm text-red-700">出口欧盟产品的碳足迹计算和申报</p>
              </div>
              <div className="bg-green-50 p-3 rounded">
                <h4 className="font-medium text-green-800 mb-1">CDP评估</h4>
                <p className="text-sm text-green-700">年度气候变化问卷填写和优化</p>
              </div>
              <div className="bg-blue-50 p-3 rounded">
                <h4 className="font-medium text-blue-800 mb-1">供应商管理</h4>
                <p className="text-sm text-blue-700">供应链ESG风险评估和协作</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const renderFeatures = () => (
    <div className="space-y-8">
      {/* 功能优先级矩阵 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">功能优先级矩阵</h2>
        <div className="grid md:grid-cols-2 gap-8">
          
          {/* 高优先级 */}
          <div>
            <h3 className="font-semibold text-red-600 mb-4 flex items-center">
              <AlertTriangle className="w-5 h-5 mr-2" />
              高优先级（P0-P1）
            </h3>
            <div className="space-y-3">
              <div className="border border-red-200 rounded p-3">
                <h4 className="font-medium text-gray-800">数据基础设施</h4>
                <p className="text-sm text-gray-600">数据连接器、标准化引擎、存储系统</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">P0</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">8周</span>
                </div>
              </div>
              <div className="border border-red-200 rounded p-3">
                <h4 className="font-medium text-gray-800">碳排放计算</h4>
                <p className="text-sm text-gray-600">Scope1/2/3计算、PCF模块</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">P0</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">6周</span>
                </div>
              </div>
              <div className="border border-orange-200 rounded p-3">
                <h4 className="font-medium text-gray-800">基础报告生成</h4>
                <p className="text-sm text-gray-600">GRI、SASB框架支持</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-orange-100 text-orange-800 rounded text-xs">P1</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">4周</span>
                </div>
              </div>
            </div>
          </div>

          {/* 中等优先级 */}
          <div>
            <h3 className="font-semibold text-yellow-600 mb-4 flex items-center">
              <Clock className="w-5 h-5 mr-2" />
              中等优先级（P2-P3）
            </h3>
            <div className="space-y-3">
              <div className="border border-yellow-200 rounded p-3">
                <h4 className="font-medium text-gray-800">AI智能分析</h4>
                <p className="text-sm text-gray-600">风险预警、基准对比、趋势分析</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">P2</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">10周</span>
                </div>
              </div>
              <div className="border border-yellow-200 rounded p-3">
                <h4 className="font-medium text-gray-800">供应商协作</h4>
                <p className="text-sm text-gray-600">供应商门户、数据收集、评估</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">P2</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">8周</span>
                </div>
              </div>
              <div className="border border-blue-200 rounded p-3">
                <h4 className="font-medium text-gray-800">评级平台集成</h4>
                <p className="text-sm text-gray-600">CDP、EcoVadis自动填写</p>
                <div className="mt-2">
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">P3</span>
                  <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs ml-2">6周</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 技术实现要点 */}
      <div className="bg-gray-50 rounded-lg p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">技术实现要点</h2>
        <div className="grid md:grid-cols-3 gap-6">
          
          <div>
            <h3 className="font-semibold text-blue-600 mb-3">数据处理</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• 实时数据管道（Kafka/Pulsar）</li>
              <li>• 数据湖存储（Delta Lake）</li>
              <li>• ETL工具（Airflow）</li>
              <li>• 数据质量监控</li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-green-600 mb-3">AI/ML能力</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• 深度学习模型部署</li>
              <li>• 自然语言处理</li>
              <li>• 计算机视觉（OCR）</li>
              <li>• 预测分析算法</li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-purple-600 mb-3">系统集成</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• RESTful API设计</li>
              <li>• 微服务架构</li>
              <li>• 第三方API集成</li>
              <li>• 安全认证授权</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );

  const renderRoadmap = () => (
    <div className="space-y-8">
      {/* 开发路线图 */}
      <div className="bg-white rounded-lg shadow-sm p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">产品开发路线图</h2>
        
        {/* 阶段1 */}
        <div className="mb-8">
          <div className="flex items-center mb-4">
            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
              <span className="text-blue-600 font-semibold">1</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">MVP阶段（0-6个月）</h3>
            <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm ml-auto">当前阶段</span>
          </div>
          <div className="ml-11 grid md:grid-cols-2 gap-4">
            <div>
              <h4 className="font-medium text-gray-700 mb-2">核心功能</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>✓ 数据连接器（Excel/CSV/API）</li>
                <li>✓ 基础碳排放计算</li>
                <li>✓ 简单报告生成</li>
                <li>✓ 用户管理系统</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-700 mb-2">技术架构</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• 单体架构</li>
                <li>• 关系型数据库</li>
                <li>• 基础Web界面</li>
                <li>• 简单部署</li>
              </ul>
            </div>
          </div>
        </div>

        {/* 阶段2 */}
        <div className="mb-8">
          <div className="flex items-center mb-4">
            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
              <span className="text-green-600 font-semibold">2</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">增强阶段（6-12个月）</h3>
            <span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm ml-auto">规划中</span>
          </div>
          <div className="ml-11 grid md:grid-cols-2 gap-4">
            <div>
              <h4 className="font-medium text-gray-700 mb-2">功能增强</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>□ AI数据清洗</li>
                <li>□ 供应商门户</li>
                <li>□ 风险预警系统</li>
                <li>□ 多框架报告</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-700 mb-2">技术升级</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• 微服务架构</li>
                <li>• 数据湖存储</li>
                <li>• ML模型部署</li>
                <li>• 性能优化</li>
              </ul>
            </div>
          </div>
        </div>

        {/* 阶段3 */}
        <div className="mb-8">
          <div className="flex items-center mb-4">
            <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
              <span className="text-purple-600 font-semibold">3</span>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 ml-3">智能化阶段（12-18个月）</h3>
            <span className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm ml-auto">未来规划</span>
          </div>
          <div className="ml-11 grid md:grid-cols-2 gap-4">
            <div>
              <h4 className="font-medium text-gray-700 mb-2">AI能力</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>□ 智能行动规划</li>
                <li>□ 预测分析</li>
                <li>□ 自动化合规</li>
                <li>□ 个性化推荐</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-700 mb-2">生态集成</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• 第三方平台集成</li>
                <li>• 开放API平台</li>
                <li>• 合作伙伴生态</li>
                <li>• 国际化支持</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* 里程碑 */}
      <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6">
        <h2 className="text-xl font-bold text-gray-800 mb-6">关键里程碑</h2>
        <div className="space-y-4">
          <div className="flex items-center">
            <CheckCircle className="w-5 h-5 text-green-500 mr-3" />
            <span className="text-gray-700">Q1 2024: 完成技术选型和架构设计</span>
          </div>
          <div className="flex items-center">
            <CheckCircle className="w-5 h-5 text-green-500 mr-3" />
            <span className="text-gray-700">Q2 2024: MVP版本上线，首批客户试用</span>
          </div>
          <div className="flex items-center">
            <Clock className="w-5 h-5 text-blue-500 mr-3" />
            <span className="text-gray-700">Q3 2024: AI功能集成，供应商模块上线</span>
          </div>
          <div className="flex items-center">
            <Clock className="w-5 h-5 text-blue-500 mr-3" />
            <span className="text-gray-700">Q4 2024: 评级平台集成，商业化推广</span>
          </div>
          <div className="flex items-center">
            <Clock className="w-5 h-5 text-purple-500 mr-3" />
            <span className="text-gray-700">Q1 2025: 国际化版本，生态合作</span>
          </div>
        </div>
      </div>
    </div>
  );

  const renderActiveTab = () => {
    switch (activeTab) {
      case 'overview': return renderOverview();
      case 'architecture': return renderArchitecture();
      case 'workflow': return renderWorkflow();
      case 'features': return renderFeatures();
      case 'roadmap': return renderRoadmap();
      default: return renderOverview();
    }
  };

  return (
    <div className="w-full min-h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            <h1 className="text-2xl font-bold text-gray-900">
              AI驱动一站式ESG服务平台 - 产品设计概览
            </h1>
            <p className="mt-2 text-gray-600">
              为产品和研发团队提供完整的设计理解和实施指导
            </p>
          </div>
        </div>
      </div>

      {/* 导航标签 */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex space-x-8">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
                    activeTab === tab.id
                      ? 'border-blue-500 text-blue-600'
                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
                >
                  <Icon className="w-5 h-5 mr-2" />
                  {tab.name}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {renderActiveTab()}
      </div>
    </div>
  );
} 